<!--
  * 片区
  *
-->
<template>
  <a-card class="tree-container" :style="{ height: appConfigStore.getLayoutContentClientRect.height + 'px' }" :bodyStyle="{ height: 'calc(100% - 56px)', overflowY: 'auto' }">
    <template #title>
      <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
        <span style="font-size: 14px">片区列表</span>
        <!-- <a-button type="primary" size="small" @click="showFormModal()">
          <span style="font-size: 12px">新增</span>
        </a-button> -->
      </div>
    </template>
    <a-menu mode="vertical" @select="onSelect" v-model:selectedKeys="selectedKeys">
      <a-menu-item v-for="item in tableData" :key="item.id">
        <template v-if="item.id === 0">
          <div style="width: 100%; height: 100%">{{ item.name }}</div>
        </template>
        <a-popover placement="right" v-else>
          <template #content>
            <div style="display: flex; flex-direction: column">
              <a-button type="link" @click="showFormModal(item)" v-privilege="'system:role:update'">编辑</a-button>
              <a-button danger type="link" @click="deleteData(item.id, item.name)" v-privilege="'system:role:delete'">删除</a-button>
            </div>
          </template>
          <div style="width: 100%; height: 100%">{{ item.name }}</div>
        </a-popover>
      </a-menu-item>
    </a-menu>
  </a-card>
</template>
<script setup lang="ts">
import _ from 'lodash'
import { areaApi } from '@/api/business/data/store-api'
import { useAppConfigStore } from '@/store/modules/app-store'
import { useQuery } from '@/hooks/web/use-query-hook'
import { QUERY_FORM_OP } from '@/constants/support/query-form-op-const'
import eventEmitter from '@/lib/event-emitter'
import customEventName from '@/views/business/data/store/store-event-name'
const appConfigStore = useAppConfigStore()

const selectedKeys = ref([0])
const { tableData, queryData, deleteData } = useQuery({
  fetchDataApi: async ({ filter, op }) => {
    const res = await areaApi.queryList({ filter, op, limit: 99999 })
    const list = res.data.data
    list.unshift({ id: 0, name: '全部', sort: 0 })
    return {
      list: _.sortBy(list, 'sort'),
      total: res.data.total
    }
  },
  fetchDeleteApi: async (id) => {
    const res = await areaApi.delete({ id })
    return !!res
  },
  queryFormFilter: {
    name: ''
  },
  queryFormOp: {
    name: QUERY_FORM_OP['模糊查询']
  }
})
eventEmitter.on(customEventName.QueryAreaList, queryData)
eventEmitter.on(customEventName.RefreshAreaList, () => {
  selectedKeys.value = [0]
})
onMounted(queryData)

// 选中tree
function onSelect({ key, selectedKeys: keys }) {
  selectedKeys.value = keys
  eventEmitter.emit(customEventName.QueryStoreList, {
    page: 1,
    store_region_id: key
  })
}

// ---------------------------- 新增/编辑 -----------------------
function showFormModal(data?: any) {
  eventEmitter.emit(customEventName.AreaFormModal, {
    title: data ? '编辑片区' : '新增片区',
    data
  })
}
</script>
<style scoped lang="less">
:deep(.ant-card-body) {
  padding-top: 10px;
}
.tree-container {
  overflow-y: auto;
}
.popover-item-wrapper {
  display: flex;
  flex-direction: column;
}
.line-item {
  display: flex;
  gap: 4px;
  align-items: center;
}
</style>
<style scoped lang="less">
.role-container {
  height: 85vh;
  overflow-y: auto;

  :deep(.ant-card-body) {
    padding: 5px;
  }
}
:deep(.ant-menu-light.ant-menu-root.ant-menu-vertical) {
  border-inline-end: none;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none;
}
</style>
